<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="alarmRuleName" label="名称" :rules="[{ required: true, message: '请输入告警名称' }]">
      <Input v-model:value="formState.alarmRuleName" :disabled="isEdit" />
    </FormItem>

    <FormItem name="alarmDescription" label="描述">
      <Textarea v-model:value="formState.alarmDescription" />
    </FormItem>
    <FormItem name="ruleType" label="规则类型" :rules="[{ required: true, message: '请选择规则类型' }]">
      <RadioGroup v-model:value="formState['ruleType']">
        <RadioButton value="THRESHOLD">阈值规则</RadioButton>
        <RadioButton value="EVENT">事件类告警</RadioButton>
      </RadioGroup>
    </FormItem>

    <FormItem name="metricName" label="指标名称" :rules="[{ required: true, message: '请选择指标名称' }]">
      <TreeSelect v-model:value="formState.metricName" :tree-data="metricNameOptionList">
        <!--        <SelectOption v-for="metricName in metricNameOptionList" :value="metricName.value">-->
        <!--          {{ metricName.title }}-->
        <!--        </SelectOption>-->
      </TreeSelect>
    </FormItem>

    <FormItem name="dimensionsKey" label="指标维度" :rules="[{ required: true, message: '请选择指标维度' }]">
      <Select v-model:value="formState.dimensionsKey" :disabled="isEdit">
        <SelectOption
          v-for="dimensionsKey in dimensionsKeyOptionList"
          v-bind:key="dimensionsKey.value"
          :value="dimensionsKey.value"
        >
          {{ dimensionsKey.key }}
        </SelectOption>
      </Select>
    </FormItem>

    <FormItem name="dimensionsValue" label="维度取值" :rules="[{ required: true, message: '请选择维度取值' }]">
      <Select v-model:value="formState.dimensionsValue" :disabled="isEdit">
        <SelectOption
          v-for="dimensionsValue in dimensionsValueOptionList"
          v-bind:key="dimensionsValue.value"
          :value="dimensionsValue.value"
        >
          {{ dimensionsValue.key }}
        </SelectOption>
      </Select>
    </FormItem>

    <FormItem
      name="period"
      label="統計周期"
      :rules="[
        { required: true, message: '请输入統計周期' },
        { pattern: /^([0-5]?[0-9]|60)$/, message: '不得大于60' },
      ]"
    >
      <Input v-model:value="formState.period" disabled />
    </FormItem>

    <FormItem name="statistic" label="統計方式" :rules="[{ required: true, message: '请选择統計方式' }]">
      <Select v-model:value="formState.statistic">
        <SelectOption value="sampleCount">样本数量</SelectOption>
        <SelectOption value="sum">总计</SelectOption>
        <SelectOption value="maximum">最大值</SelectOption>
        <SelectOption value="minimum">最小值</SelectOption>
        <SelectOption value="average">平均值</SelectOption>
      </Select>
    </FormItem>

    <FormItem name="comparisonOperator" label="阈值符号" :rules="[{ required: true, message: '请选择阈值符号' }]">
      <Select v-model:value="formState.comparisonOperator">
        <SelectOption value=">="> &gt;=</SelectOption>
        <SelectOption value="<="> &lt;=</SelectOption>
        <SelectOption value=">"> &gt;</SelectOption>
        <SelectOption value="<"> &lt;</SelectOption>
      </Select>
    </FormItem>

    <FormItem name="threshold" label="阈值" :rules="[{ required: true, message: '请输入阈值' }]">
      <Input v-model:value="formState.threshold" />
    </FormItem>

    <FormItem name="evaluationPeriods" label="间隔周期" :rules="[{ required: true, message: '请选择间隔周期' }]">
      <Select v-model:value="formState.evaluationPeriods">
        <SelectOption value="1">1次</SelectOption>
        <SelectOption value="2">2次</SelectOption>
        <SelectOption value="3">3次</SelectOption>
        <SelectOption value="4">4次</SelectOption>
        <SelectOption value="5">5次</SelectOption>
      </Select>
    </FormItem>

    <FormItem name="alarmLevel" label="告警级别" :rules="[{ required: true, message: '请选择间隔周期' }]">
      <Select v-model:value="formState.alarmLevel">
        <SelectOption value="1">紧急</SelectOption>
        <SelectOption value="2">重要</SelectOption>
        <SelectOption value="3">次要</SelectOption>
        <SelectOption value="4">提示</SelectOption>
      </Select>
    </FormItem>
  </Form>
</template>

<script lang="ts" setup>
import {
  Form,
  FormItem,
  Input,
  Textarea,
  RadioGroup,
  RadioButton,
  Select,
  TreeSelect,
  SelectOption,
} from 'ant-design-vue';
import { onMounted, ref, toRaw, watch } from 'vue';
import { getCCEDimensionKey, getCCEDimensionValue, getMetricName } from '/@/api/maintenance-center/alarm/alarm';

const emit = defineEmits(['submit']);

const formItemLayout = {
  labelCol: { span: 4 },
  labelWidth: 200,
  wrapperCol: { span: 16 },
};

let formState = ref<Record<string, any>>({});
const formRef = ref();

const metricNameOptionList = ref([]);
const dimensionsKeyOptionList = ref([]);
const dimensionsValueOptionList = ref([]);
const isEdit = ref(false);

onMounted(async () => {
  formState.value.period = 1;
  metricNameOptionList.value = await getMetricName();
});

watch(
  () => formState.value.metricName,
  async () => {
    if (formState.value.metricName) {
      if (isEdit.value === false) {
        formState.value.dimensionsKey = undefined;
        formState.value.dimensionsValue = undefined;
        dimensionsValueOptionList.value = [];

        dimensionsKeyOptionList.value = await getCCEDimensionKey({
          metricName: formState.value.metricName,
          namespace: formState.value.metricName,
        });
      }
    } else {
      if (isEdit.value === false) {
        formState.value.dimensionsKey = undefined;
        formState.value.dimensionsValue = undefined;
        dimensionsValueOptionList.value = [];
        dimensionsKeyOptionList.value = [];
      }
    }
  }
);

watch(
  () => formState.value.dimensionsKey,
  async () => {
    if (formState.value.dimensionsKey) {
      if (isEdit.value === false) {
        formState.value.dimensionsValue = undefined;
      }
      dimensionsValueOptionList.value = await getCCEDimensionValue({
        metricName: formState.value.metricName,
        namespace: formState.value.metricName,
        dimensionsKey: formState.value.dimensionsKey,
      });
    } else {
      if (isEdit.value === false) {
        formState.value.dimensionsValue = undefined;
        dimensionsValueOptionList.value = [];
      }
    }
  }
);

function getFormValue() {
  return formState.value;
}

function setFormValue(fieldValue: any) {
  isEdit.value = true;
  formState.value = fieldValue;
  formState.value.dimensionsKey = formState.value.dimensions[0].name;
  formState.value.ruleType = 'THRESHOLD';
  formState.value.dimensionsValue = formState.value.dimensions[0].value;
}

function handleSubmit() {
  formRef.value.validate().then(() => {
    let params = toRaw(formState);
    emit('submit', params);
  });
}

defineExpose({ handleSubmit, setFormValue, getFormValue });
</script>
